<template>
	<view class="container" v-if="loadEnd">
		<view class="toubox">
			<image :src="avatar || '/static/login/user.png'" alt="" mode="aspectFill"></image>
			<button open-type="chooseAvatar" @chooseavatar="bindchooseavatar" class="btns">更换头像</button>
		</view>
		<form @submit="modify">
			<view class="info-item" @click="tosetnickname">
				<view class="nickname">{{nickname}}
					<image src="/static/forum/back1.png" style="width: 20rpx;height: 20rpx;" mode=""></image>
				</view>
			</view>
			<block v-if="first == 'false' && oldPhone != ''">
				<view class="info-item">
					<view class="old-phone">{{oldPhone}}</view>
					<view class="geng-phone">
						<view class="genggai" @click="tosetphone">
							更换手机号
						</view>
						<image src="/static/forum/back1.png" style="width: 20rpx;height: 20rpx;" mode=""></image>
					</view>
				</view>
				<!-- 更换校区 -->
				<view class="info-item">
					<view class="old-phone">{{title}}</view>
					<view class="geng-xiaoqu" @click="toxiaoqu">
						<view class="genggai">
							更换校区
						</view>
						<image src="/static/forum/back1.png" style="width: 20rpx;height: 20rpx;" mode=""></image>
					</view>
				</view>
			</block>
		</form>
	</view>
</template>

<script>
	var app = getApp( )
	import ikz from '@/pages/Common/tools.js'
	export default {
		data( ) {
			return {
				loadEnd: false,
				first: false,
				avatar: '',
				nickname: '',
				newPhone: '',
				oldPhone: '',
				captcha: '',
				// 验证码
				captcha: "",
				// 验证码倒计时
				countdown: 0,
				// 定时器
				interval: null,
				title:'',
				avatarban:''
			}
		},
		onLoad( options ) {
			this.getPhone( )
			// 等待0.5秒.显示页面
			setTimeout( ( ) =>
				this.loadEnd = true, 500 )
			this.first = options.first
			if ( options.first == 'true' ) {
				uni.setNavigationBarTitle( {
					title: '设置信息',
				} )
			} else {
				uni.setNavigationBarTitle( {
					title: '修改信息',
				} )
				if ( uni.getStorageSync( 'user_info' ) ) {
					this.avatar = uni.getStorageSync( 'user_info' ).avatar || ''
					this.nickname = uni.getStorageSync( 'user_info' ).nickname || ''
					this.title = uni.getStorageSync( 'default_agent' ).title || ''
				}
			}
		},
		onShow() {
			// this.getshoose()
		},	
		methods: {
			
			// 获取手机号
			getPhone( ) {
				var path = '/xyb/user_wechat/mobile';
				var data = {};
				ikz.get( path, data, res => {
					console.log(res,'手机号');
					if ( res.statusCode == 200 ) {
						this.oldPhone = res.data.data.mobile
						console.log( "旧手机号是", this.oldPhone );
					} else {
						uni.showModal( {
							title: '提示',
							content: '服务器繁忙，请稍后再试',
							showCancel: false,
							success: function( res ) {}
						} );
					}

				} );
			},
			// 获取验证码 
			getCode( ) {
				if ( this.newPhone == '' ) {
					uni.showToast( {
						title: "请先填写手机号后获取验证码",
						icon: "none",
						duration: 2000,
					} )
					return
				}

				var path = '/sms/send';
				var data = {
					mobile: this.newPhone
				};
				ikz.requestPost( path, data, res => {
					if ( res.data.code == 1 ) {
						uni.showToast( {
							title: "验证码已发送",
							icon: "none",
							duration: 2000,
						} )
						clearInterval( this.interval )
						this.countdown = 60
						this.interval = setInterval( ( ) => {
							if ( this.countdown <= 1 ) {
								clearInterval( this.interval )
								this.countdown = 0
							} else this.countdown--
						}, 1000 )
					} else {
						uni.showToast( {
							title: res.data.msg,
							icon: "none",
							duration: 2000,
						} )
					}

				} );
			},
			bindchooseavatar( val ) {
				uni.showLoading( {
					title: '上传中',
					mask: true,
				} )
				uni.uploadFile( {
					url: app.globalData.adminPath + '/common/upload',
					filePath: val.detail.avatarUrl,
					name: 'file',
					formData: {
						token: uni.getStorageSync( 'local_user_session' ),
					},
					success: uploadFileRes => {
						if ( uploadFileRes.code == 401 ) {
							console.log( uni.getStorageSync( 'local_user_session' ) );
						} else {
							this.avatar = app.globalData.adminImgPath + JSON.parse( uploadFileRes.data ).data
								.url
								this.avatarban = JSON.parse( uploadFileRes.data ).data.url
								
								const user_info = {
									avatar:this.avatar,
									mobile:this.mobile,
									nickname:this.nickname,
									avatarban:this.avatarban
								}
								
								uni.setStorageSync('user_info',user_info)
								
						}
					},
					complete: ( ) => {
						uni.hideLoading( )
					},
				} )
			},
			tosetnickname(){
				uni.navigateTo({
					url:'/pages/login/setnickname/setnickname'
				})
			},
			tosetphone(){
				uni.navigateTo({
					url:'/pages/login/setphone/setphone'
				})
			},
			toxiaoqu(){
				uni.navigateTo({
					url:'/pages/login/setxiaoqu/setxiaoqu'
				})
			},
			modify( e ) {
				this.nickname = e.detail.value.nickname
				let title = ''
				if ( !this.avatar ) {
					title = '请上传头像'
				} else if ( !this.nickname ) {
					title = '请输入昵称'
				}
				if ( title ) {
					uni.showToast( {
						title,
						icon: 'none',
						duration: 2000,
					} )
				} else {
					let path = '/xyb/user_wechat/update_nickname_avatar'
					let data = {
						token: uni.getStorageSync( 'local_user_session' ),
						nickname: this.nickname,
						avatar: this.avatar,
						mobile: this.newPhone,
						captcha: this.captcha
					}
					if ( this.avatar == uni.getStorageSync( 'user_info' ).avatar ) {
						data.avatar = ''
					}
					ikz.requestPost( path, data, res => {
						if ( res.data.code == 1 ) {
							let title = ''
							if ( this.first == 'true' ) {
								title = '设置成功'
							} else {
								title = '修改成功'
							}
							uni.setStorageSync( 'user_info', res.data.data.user_info )
							getApp( ).globalData.mobile = res.data.data.user_info.mobile
							uni.showToast( {
								title,
								icon: 'none',
							} )
							setTimeout( ( ) => {
								if ( this.first == 'true' ) {
									uni.reLaunch( {
										url: '/pages/Home/index',
									} )
								} else {
									uni.navigateBack( )
								}
							}, 2000 )
						} else {
							uni.showToast( {
								title: res.data.msg,
								icon: "none",
								duration: 2000
							} )
						}
					} )
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	page {}

	.container {

		.toubox {
			width: 100%;
			height: 300rpx;
			display: flex;
			flex-direction: column;
			padding-top: 22rpx;
			box-sizing: border-box;

			image {
				width: 160rpx;
				height: 160rpx;
				border-radius: 400rpx 400rpx 400rpx 400rpx;
				margin: 0 auto;
			}

			button {
				width: 158rpx;
				height: 48rpx;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				border: 2rpx solid #999999;
				margin-top: 22rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
				line-height: 48rpx;
				text-align: center;
			}
		}

		.info-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 32rpx;
			background: #ffffff;
			border-bottom: 0.5px #eee solid;

			.info-item-title {
				flex: 1;
				margin-right: 40rpx;
				font-size: 28rpx;
				line-height: 40rpx;
				color: #000000;
			}

			.info-item-input {
				margin-right: 16rpx;
				width: 200rpx;
				font-size: 28rpx;
				line-height: 40rpx;

				.placeholder {
					font-size: 28rpx;
					line-height: 40rpx;
				}
			}

			.countdown {
				margin-left: 24rpx;
				color: #666;
				font-size: 32rpx;
				line-height: 44rpx;
			}

			.info-item-input-captcha {
				width: 180rpx;
				font-size: 28rpx;
				line-height: 40rpx;
				text-align: right;

				.placeholder {
					font-size: 28rpx;
					line-height: 40rpx;
				}
			}

			.send-code {
				font-size: 28rpx;
				line-height: 40rpx;
				color: #ffc045;
			}

			.head-pic {

				button {
					overflow: hidden;
					// display: flex;
					text-align: left;
					padding: 0;
					margin: 0;
					height: 80rpx;
					background-color: #fff;
				}

				button::after {
					border: none;
				}

				image {
					overflow: hidden;
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
				}
			}

			.nickname {
				width: 100%;
				font-size: 28rpx;
				line-height: 40rpx;
				text-align: left;
				display: flex;
				align-items: center;
				justify-content: space-between;

			}

			.old-phone {
				font-size: 28rpx;
				line-height: 40rpx;
			}

			.geng-phone {
				width: 174rpx;
				height: 48rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.genggai {
					width: 148rpx;
					height: 48rpx;
					border-radius: 24rpx 24rpx 24rpx 24rpx;
					border: 2rpx solid #999999;
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
					line-height: 48rpx;
					text-align: center;
				}
			}
			.geng-xiaoqu {
				width: 174rpx;
				height: 48rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
			
				.genggai {
					width: 148rpx;
					height: 48rpx;
					border-radius: 24rpx 24rpx 24rpx 24rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #222222;
					line-height: 48rpx;
					text-align: center;
				}
			}
		}

		.confirm-btn {
			box-sizing: border-box;
			position: fixed;
			bottom: 0;
			padding: 16rpx;
			width: 100%;
			text-align: center;

			.confirm-world {
				color: #fff;
				background: #ffc045;
				border-radius: 44rpx;
			}

			.confirm-world::after {
				border: none;
			}
		}
	}
</style>